@import "../base"
$card_size: 1024px

.game_big_card
  width: $card_size
  height: $card_size * 0.4
  background: linear-gradient(70deg, #181818, #1c304d)
  display: flex
  flex-direction: row
  align-items: center
  border: solid transparent
  border-radius: 10px
  justify-content: center
  box-shadow: 2px 2px 15px 2px rgb(85, 125, 152)


  //616 px
  .card_header_img

    img
      width: $card_size * 0.7  * 0.95
      height: $card_size * 0.7  * 0.54
      scale: inherit

  .game_card_info
    display: flex
    flex-direction: column
    align-items: center
    justify-content: center
    padding: 10px
    width: $card_size * 0.3

    .game_head
      font-size: $font_size
      color: $font_color_title

    .game_des
      margin-right: auto

    .game_price_overview
      display: flex
      flex-direction: row
      color: #BEEE11
      font-size: $card_size * 0.3 * 0.08
      background: #344654
      padding: 5px
      margin-left: auto

      .discount_percent
        background: #4c6b22
        padding: 5px

      .discount_final
        color: #a9f39d
        padding: 5px

    .screenshots
      display: inline-block
      position: relative

      div
        width: $card_size *0.3 *0.46
        height: 69px
        padding: 10px 10px 0 0
        display: inline-block

        img
          width: $card_size *0.3 *0.45
          height: $card_size *0.3 *0.3
          background-size: cover
          background-position: center center
          display: inline-block
          opacity: 0.7

          &:hover
            opacity: 1
